<template>
	<div class="demo">
		<button @click="urlClick">跳转页面</button>
		<div>Vue.extend 局部创建组件 vm.$mount</div>
		<br />
		<div id="profile"></div>
	</div>
</template>
<script>
import Vue from "vue";
// 创建构造器
var Profile = Vue.extend({
	template: "<p>{{firstName}} {{lastName}} 去 {{alias}}</p>",
	data: function() {
		return {
			firstName: "刘",
			lastName: "一搏"
		};
	},
	props: ["alias"]
});
//如果文档中没有直接挂载的元素 ,就按照下面的操作
//这样就把实例插入到文档中了，其中$el其实就是template变成DOM之后，就会不会报错“cannot find elementt:#profile”
let profile = new Profile({
	propsData: { alias: "北京" }
}).$mount();
document.querySelector("#app").appendChild(profile.$el);
// 如果是文档已经存在直接挂载的元素 则可以使用下面方法
// new Profile({
// 	propsData: { alias: "北京" }
// }).$mount("#app");
export default {
	beforeCreate() {},
	data() {
		return {};
	},
	methods: {
		urlClick() {
			this.$router.push({
				name: "componets"
			});
		}
	}
};
</script>

<style scoped>
.tab-button {
	padding: 6px 10px;
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
	border: 1px solid #ccc;
	cursor: pointer;
	background: #f0f0f0;
	margin-bottom: -1px;
	margin-right: -1px;
}
.tab-button:hover,
.tab-button.active {
	background: #f00;
	color: #fff;
}
.dome-cnt {
	border: 1px solid #ccc;
	padding: 10px;
}
</style>
